<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Parabel.cdy</title>
    <style type="text/css">
        * {
            margin: 0px;
            padding: 0px;
        }
        html{overflow: hidden;}

        #CSConsole {
            background-color: #FAFAFA;
            border-top: 1px solid #333333;
            bottom: 0px;
            height: 200px;
            overflow-y: scroll;
            position: fixed;
            width: 100%;
        }
    </style>
    <script type="text/javascript" src="../build/js/Cindy.js"></script>
<script id="csdraw" type="text/x-cindyscript">
F.xy=(F.x,0);
G.xy=(G.x,0);
//plot(x^2/4,size->3,color->(.7,.0,.0));
if(|F.x-round(F.x)|<0.1,F.x=round(F.x));
if(|G.x-round(G.x)|<0.1,G.x=round(G.x));


drawtext(F+(0.2,-.8),"y="+(-F.x));
drawtext(G+(0.2,-.8),"x="+(G.x));
drawtext(L+(0.4,.2),"xy="+(G.x)*(-F.x));

repeat(80,i,
   if(mod(i,10)!=0,
     if(mod(i,5)==0,
        draw((-.2,i/4),(.2,i/4),color->(0,0,0)),
        draw((-.1,i/4),(.1,i/4),color->(0,0,0))
     ),
      draw((-.3,i/4),(.3,i/4),color->(0,0,0))
     );
);


repeat(30,#,i=#-15;
   if(mod(i,10)!=0,
     if(mod(i,5)==0,
       draw((i,-.2),(i,.2),color->(0,0,0)),
       draw((i,-.1),(i,.1),color->(0,0,0))
     ),
      draw((i,-.3),(i,.3),color->(0,0,0))
     );


);
draw(F,H,color->(0,0.6,0),size->3);
draw(G,K,color->(0,0.6,0),size->3);
</script>

    <script type="text/javascript">
CindyJS({
	scripts: "cs*",
	defaultAppearance: {},
	geometry: [
		{ name: "A", type: "Free", pos: [ 0.0, -0.0, 4.0 ], color: [ 1.0, 0.0, 0.0 ],  pinned: true, size: 0.0 },
		{ name: "B", type: "Free", pos: [ 4.0, -2.0, -2.0 ], color: [ 1.0, 0.0, 0.0 ],  pinned: true, size: 0.0 },
		{ name: "C", type: "Free", pos: [ 4.0, 2.0, 2.0 ], color: [ 1.0, 0.0, 0.0 ],  pinned: true, size: 0.0 },
		{ name: "D", type: "Free", pos: [ 4.0, -4.0, -1.0 ], color: [ 1.0, 0.0, 0.0 ],  pinned: true, size: 0.0 },
		{ name: "E", type: "Free", pos: [ 4.0, 4.0, 1.0 ], color: [ 1.0, 0.0, 0.0 ],  pinned: true, size: 0.0 },
		{ name: "C0", type: "ConicBy5", color: [ 0.7568628, 0.0, 0.0 ], args: [ "A", "B", "C", "D", "E" ], size: 3 },
		{ name: "a", type: "Through", pos: [ 0.0, -4.0, 0.0 ], color: [ 0.0, 0.0, 0.0 ], args: [ "A" ],  pinned: true, size: 1 },
		{ name: "b", type: "Perp", pos: [ 4.0, -0.0, 0.0 ], color: [ 0.0, 0.0, 0.0 ], args: [ "a", "A" ], size: 1 },
		{ name: "F", type: "PointOnLine", pos: [ 4.0, -0.0, -0.5714285714285714 ], color: [ 0.0, 1.0, 0.0 ], args: [ "a" ], size: 4.0 },
		{ name: "G", type: "PointOnLine", pos: [ 4.0, -0.0, 1.3333333333333333 ], color: [ 0.0, 1.0, 0.0 ], args: [ "a" ], size: 4.0 },
		{ name: "c", type: "Perp", pos: [ 0.5714285714285714, -0.0, 4.0 ], color: [ 0.098039225, 0.61960787, 0.30588236 ], args: [ "a", "F" ], size: 3 ,visible:false},
		{ name: "d", type: "Perp", pos: [ -1.3333333333333333, -0.0, 4.0 ], color: [ 0.098039225, 0.61960787, 0.30588236 ], args: [ "a", "G" ], size: 3 ,visible:false},
		{ name: "Collection__1", type: "IntersectionConicLine", args: [ "C0", "c" ] },
		{ name: "H", type: "SelectP", pos: [ 2.2857142857142856, -4.0, -0.32653061224489793 ], color: [ 1.0, 1.0, 1.0 ], args: [ "Collection__1" ], size: 3.0 },
		{ name: "", type: "SelectP", pos: [ 0.0, -4.0, 0.0 ], color: [ 1.0, 1.0, 1.0 ], args: [ "Collection__1" ], size: 0.0 },
		{ name: "Collection__2", type: "IntersectionConicLine", args: [ "C0", "d" ] },
		{ name: "K", type: "SelectP", pos: [ 4.0, 3.0, 1.3333333333333333 ], color: [ 1.0, 1.0, 1.0 ], args: [ "Collection__2" ], size: 3.0 },
		{ name: "e", type: "Segment", pos: [ -0.7619047619047619, -0.7619047619047619, 4.0 ], color: [ 0.098039225, 0.61960787, 0.30588236 ], args: [ "H", "K" ], size: 3 },
		{ name: "L", type: "Meet", pos: [ 0.0, -4.0, -0.7619047619047619 ], color: [ 1.0, 0.0, 0.0 ], args: [ "b", "e" ], size: 3.0 } ],
	ports: [
		{ id: "CSCanvas", width: 744, height: 500, transform: [ { visibleRect: [ -14.72, 17.16, 15.04, -1.08 ] } ],
                        grid:1,
                        snap:true
         } ] }


        );

    </script>
</head>
<body>
    <div id="CSCanvas" style="border:2px solid #000000" ></div>

</body>
</html>
